<template>
	<view class="container" :style="appThemeStyle">
	  <!-- 标题 -->
	  <view class="page-title">保养预约</view>
	  <!-- 表单组件 -->
	  <view class="form-wrapper">
	    <u-form :model="form" ref="uForm" label-width="240rpx">
	      <u-form-item label="上传取车地址" prop="address_id">
			<text @click="addressShow=true">{{address}}</text>
	        <u-select v-model="addressShow" :list='addressList' value-name='address_id' label-name='detail' @confirm="addressSubmit"/>
	      </u-form-item>
		  <u-form-item label="上门取车时间" prop="get_time">
			<text @click="getTimeShow=true">{{datetimeDefaultValue}}</text>
			<u-picker v-model="getTimeShow" mode="time" :params="params" @confirm="timeSubmit"></u-picker>
		  </u-form-item>
		  <u-form-item label="保养服务类型" prop="type">
			<text @click="serviceShow=true">{{service}}</text>  
			<u-select v-model="serviceShow" :list='serviceList' value-name='goods_id' label-name='goods_name' @confirm="serviceSubmit"/>
		  </u-form-item>
	    </u-form>
	  </view>
	  <!-- 操作按钮 -->
	  <view class="footer">
	    <view class="btn-wrapper">
	      <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">预约</view>
	    </view>
	  </view>
	</view>
</template>

<script>
	import * as Api from '@/api/bike/maintenance'
		
	// 表单验证规则
	const rules = {
		addres_id: [{
		  required: true,
		  message: '请输入取车时间',
		  trigger: ['blur', 'change']
		}],
	    get_time: [{
		  required: true,
		  message: '请输入取车时间',
		  trigger: ['blur', 'change']
		}],
		service_type: [{
		  required: true,
		  message: '请输入服务类型',
		  trigger: ['blur', 'change']
		}]
	}
	export default {
	  data() {
	    return {
	      form: {
	        address_id: '',
	        service_type: '',
			get_time:'',
	      },
		  addressList:[],
		  serviceList:[],
		  addressShow:false,
		  serviceShow:false,
		  getTimeShow:false,
		  address:'请选择上车地址',
		  service:'请选择保养类型',
		  datetimeDefaultValue:'请选择时间',
	      rules,
	      // 按钮禁用
	      disabled: false,
		  isLoading:true,
		  params: {
			year: true,
			month: true,
			day: true,
			hour: true,
			minute: true,
			second: false
		  },
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad(options) {
		  
	  },
	  onShow(){
		this.getPageData()  
	  },
	
	  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	  onReady() {
	    this.$refs.uForm.setRules(this.rules)
	  },
	
	  methods: {
		getPageData(){
		  const app = this
		  app.isLoading = true
		  Promise.all([app.getAddress(), app.getService()])
		    .then(() => {
		    })
		    .catch(err => console.log('catch', err))
		    .finally(() => app.isLoading = false)	
		},
		getAddress(){
			const app = this
			return new Promise((resolve, reject) => {
			    Api.address()
			    .then(result => {
			      app.addressList = result.data.list
			      resolve(app.addressList)
			    })
			    .catch(reject)
			})
		},
		addressSubmit(value){
		  const app = this
		  console.log(value)
		  app.form.address_id = value[0].value
		  app.address = value[0].label
		},
		serviceSubmit(value){
			const app = this
			app.form.service_type = value[0].value
			app.service = value[0].label
		},
		getService(){
			const app = this
			return new Promise((resolve, reject) => {
			    Api.service()
				.then(result => {
				  app.serviceList = result.data.list
				  resolve(app.serviceList)
				})
				.catch(reject)
			})
		},
		timeSubmit(value){
			console.log(value)
			const app = this
			app.datetimeDefaultValue = value.year +'-' + value.month + '-' + value.day + ' ' + value.hour + ':' +value.minute
			app.form.get_time = this.datetimeDefaultValue + ':00'
		},
	    // 表单提交
	    handleSubmit() {
	      const app = this
	      if (app.disabled) {
	        return false
	      }
		  console.log(app.form)
	      app.$refs.uForm.validate(valid => {
	        if (valid) {
	          app.disabled = true
	          Api.add(app.form)
	            .then(result => {
	              app.$toast(result.message)
				  var url = '/pages/checkout/index?mode=buyNow&goodsId='+app.form.service_type+'&goodsSkuId=0&goodsNum=1&maintenanceId='+result.data.id
	              uni.navigateTo({
					  url:url
				  })
	            })
	            .finally(() => app.disabled = false)
	        }
	      })
	    }
	
	  }
	}
</script>

<style lang="scss" scoped>
	.page-title {
	  width: 94%;
	  margin: 0 auto;
	  padding-top: 40rpx;
	  font-size: 28rpx;
	  color: rgba(69, 90, 100, 0.6);
	}
	
	.form-wrapper {
	  margin: 20rpx auto 20rpx auto;
	  padding: 0 40rpx;
	  width: 94%;
	  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
	  border-radius: 16rpx;
	  background: #fff;
	}
	
	// 底部操作栏
	.footer {
	  margin-top: 80rpx;
	
	  .btn-wrapper {
	    height: 100%;
	    // display: flex;
	    // align-items: center;
	    padding: 0 20rpx;
	  }
	
	  .btn-item {
	    flex: 1;
	    font-size: 28rpx;
	    height: 86rpx;
	    color: #fff;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  .btn-item-wechat {
	    background: #0ba90b;
	    margin-bottom: 26rpx;
	  }
	
	  .btn-item-main {
	    background: linear-gradient(to right, $main-bg, $main-bg2);
	    color: $main-text;
	
	    // 禁用按钮
	    &.disabled {
	      opacity: 0.6;
	    }
	  }
	
	}
</style>